<template>
  <div class="demo-input">
    <epee-input ref="inputRef" v-model="inputData1" @input="handleInput" />
    <epee-button @click="handleFocus">触发focus</epee-button>
    <epee-button @click="handleClear">清空</epee-button>

    <h4>size</h4>
    <div>
      <epee-input
        :modelValue="i"
        v-for="i in ['large', 'middle', 'small']"
        :size="i"
        :key="i"
      />
    </div>

    ---------------

    <div>
      {{ formData.name }}

      <input type="text" v-model="formData.name" />
      <epee-input type="text" v-model="formData.name" />
      <epee-button @click="initName">initName</epee-button>
      <epee-button @click="initDataFromServer">initDataFromServer</epee-button>
      
    </div>
  </div>
</template>

<script lang="ts">
import { EpeeInput } from "epee-ui";
import Vue, { defineComponent, ref } from "vue";
export default defineComponent({
  name: "DocsNormalInput",
  data() {
    return {
      formData: {},
    };
  },
  methods:{
       initName(){
            this.formData.name = 'hello world'
        },
        initFormData(){
            this.formData = {name:'hello world'}
        },
        async initDataFromServer(){
        
            // 模拟网络请求，得到formData初始值
            await new Promise(resolve=>setTimeout(resolve,Math.random()*1000+500))  // 等待0.5s~1.5s
            this.formData = {
                id:'row_id',
                created:'2020-10-31',
                createBy:'123456',
            }
            
            // 这里模拟某种逻辑调用
            // doSomething()
            
            // 这里根据业务需要初始化 name属性值
            this.formData.name = this.formData.name || 'hello world'
            
        },
        async initDataFromServer2(){
            
             // 模拟网络请求，得到formData初始值
            await new Promise(resolve=>setTimeout(resolve,Math.random()*1000+500))  // 等待0.5s~1.5s
            this.formData = {
                id:'row_id',
                created:'2020-10-31',
                createBy:'123456',
            }
            
            // 这里模拟某种逻辑调用
            // doSomething()
            
            // 这里根据业务需要初始化 name属性值
            this.formData = {
                ...this.formData,
                name:this.formData.name||'hello world'
            }
            
        },
  },
  setup() {
    const inputRef = ref<EpeeInput | null>(null);

    const methods = {
      handleInput(e: Event) {
        //
      },
      handleFocus() {
        inputRef.value?.handleFocus();
      },
      handleClear() {
        inputRef.value?.handleClear();
      },
    };
    const inputData1 = ref("inputData1");
    return {
      inputData1,
      ...methods,
      inputRef,
    };
  },
});
</script>
